<template>
    <div class="container">
        <div class="categories">
            <div v-for="cat in categoryList" :key="cat.key" class="category"
                :class="{ active: currentCategory === cat.key }" @click="showCategory(cat.key)">
                {{ cat.label }}
            </div>
        </div>
        <div class="content">
            <div draggable="true" :style="item.img ? { backgroundImage: `url(${item.img})` } : {}"
                v-for="item in currentItems" :key="item.name" class="thumbnail draggable"
                @dragstart="handleDragStart(item.name)">
                <!-- {{ item.name }} -->
                <span class="text" v-if="!item.img">{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import * as THREE from 'three';
import { addPoint, addCone, addLand, addModels } from "/src/commonjs/basicGeometries.js"
import Label from "/src/commonjs/label.js"
import { sceneConfigStore } from "/src/store/layer.js"
const store = sceneConfigStore()


let raycaster, mouse;
let draggedValue = null;

const data = {
    geometry: [
        { name: '圆锥' },
        { name: '球体' },
        { name: '平面' },
    ],
    light: [
        { name: '点光源' },
        { name: '聚光灯' },
    ],
    model: [
        { name: '车', img: '/assets/images/车.png' },
        { name: '机房', img: '/assets/images/房子.png' },
        { name: '人物', img: '/assets/images/人.png' },
        { name: '城市', img: '/assets/images/city.png' },
        { name: '鸭子', img: '/assets/images/duck.png' },
    ],
    label: [
        { name: '弹窗' },
        { name: '标签' },
        { name: '标牌' },
    ],
    effect: [
        { name: '光圈' },
        { name: '魔法阵' },
        { name: '火焰' },
        { name: '烟雾' },
    ]
}

const categoryList = [
    { key: 'geometry', label: '几何体' },
    { key: 'light', label: '灯光' },
    { key: 'model', label: '模型' },
    { key: 'label', label: '标签' },
    { key: 'effect', label: '特效' }
]

const currentCategory = ref('geometry')

const currentItems = computed(() => data[currentCategory.value])

function showCategory(type) {
    currentCategory.value = type
}

// 光线投射器
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();

onMounted(() => {
})

function handleDragStart(name) {
    draggedValue = name;
}


// const canvas = document.getElementById('three-container');
window.addEventListener('dragover', (event) => {
    event.preventDefault();
});
window.addEventListener('drop', async (event) => {
    // 将鼠标坐标转换到 NDC（归一化设备坐标）
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 使用射线投射器
    raycaster.params.Line.threshold = 0.1//调整精度
    raycaster.setFromCamera(mouse, camera);

    //去除TransformControl
    let rayList = scene.children.filter(item => item.isTransformControlsRoot != true)
    // 计算射线与场景中的物体的交点
    const intersects = raycaster.intersectObjects(rayList);
    // 如果有交点
    let leftPosition
    if (intersects.length > 0) {
        console.log('落点:', intersects); // 输出交点坐标
        leftPosition = intersects[0].point

    } else {
        leftPosition = new THREE.Vector3(0, 0, 0)
    }
    let putData, uuid
    switch (draggedValue) {
        case '圆锥':

            uuid = addCone(leftPosition)
            putData = {
                type: 'cone',
                name: '圆锥',
            }
            break;
        case '球体':
            uuid = addPoint(leftPosition)
            putData = {
                type: 'ball',
                name: '球体',
            }
            break;
        case '平面':
            uuid = addLand(leftPosition)
            putData = {
                type: 'land',
                name: '平面',
            }
            break;
        case '光圈':
            uuid = meteor3D.addAperture(leftPosition)
            putData = {
                type: 'land',
                name: '光圈',
            }
            break;
        case '魔法阵':
            uuid = meteor3D.addMagicFormation(leftPosition)
            putData = {
                type: 'land',
                name: '魔法阵',
            }
            break;
        case '火焰':
            uuid = meteor3D.addFire(leftPosition)
            putData = {
                type: 'land',
                name: '火焰',
            }
            break;
        case '烟雾':
            uuid = meteor3D.addSmoke(leftPosition)
            putData = {
                type: 'land',
                name: '烟雾',
            }
            break;
        case '车':
            uuid = await addModels('assets/model/scene.gltf', leftPosition, 0.01)

            putData = {
                type: 'model',
                modeType: "gltf",
                name: '车',
                path: 'assets/model/scene.gltf'
            }
            break;
        case '人物':
            uuid = await addModels('assets/Jackie.glb', leftPosition)
            putData = {
                type: 'model',
                name: '人物',
                modeType: "glb",
                path: 'assets/Jackie.glb'
            }
            break;
        case '机房':
            uuid = await addModels('assets/my-model.glb', leftPosition)
            putData = {
                type: 'model',
                name: '机房',
                modeType: "glb",
                path: 'assets/my-model.glb'
            }
            break;
        case '城市':
            uuid = await addModels('assets/city.glb', leftPosition)
            putData = {
                type: 'model',
                name: '城市',
                modeType: "glb",
                path: 'assets/city.glb'
            }
            break;
        case '鸭子':
            uuid = await addModels('assets/Duck.glb', leftPosition)
            putData = {
                type: 'model',
                name: '鸭子',
                modeType: "glb",
                path: 'assets/Duck.glb'
            }
            break;
        case '标签':
            let label = new Label({
                position: leftPosition,
                name: '警告图标'
            })
            label.createSprite()
            putData = {
                type: 'label',
                name: '标签',
            }
            break;
        case '标牌':
            const biaopai = Object.assign(document.createElement('div'), {
                id: 'tag',
                className: "markers"
            });
            biaopai.innerHTML =
                `<div class="layout">
                <div class="top">
                    <svg t="1760580074265" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4611" width="32" height="32">
                        <path
                            d="M580.394471 579.933186l319.495745 410.826348 45.50394-45.826663-250.755752-478.920895-114.243933 113.92121zM443.559929 443.098645L32.733582 123.602899l45.826663-45.826662 478.920895 251.078475-113.921211 114.243933z"
                            fill="#FFC824" p-id="4612"></path>
                        <path
                            d="M1021.234055 887.810905L823.404871 382.426725l116.502994-116.180271A207.833596 207.833596 0 0 0 1000.902507 117.471163a92.944217 92.944217 0 0 0-27.754175-66.803656A94.880555 94.880555 0 0 0 904.085615 22.590608h-3.549953a202.024582 202.024582 0 0 0-141.675386 59.381028l-117.793886 117.793886L135.682211 2.259061a32.272298 32.272298 0 0 0-34.531358 7.099905L9.820251 100.689568a32.272298 32.272298 0 0 0-9.358966 24.849669 32.272298 32.272298 0 0 0 12.586196 23.558777l107.789473 83.907974-19.686101 20.008824a32.272298 32.272298 0 0 0 0 45.50394 32.272298 32.272298 0 0 0 22.913331 9.358966 32.272298 32.272298 0 0 0 22.913331-9.358966l25.495115-25.495115L258.639665 339.50457l-20.331548 20.331547a32.272298 32.272298 0 0 0 0 45.50394 32.272298 32.272298 0 0 0 22.913331 9.358966 32.272298 32.272298 0 0 0 22.913332-9.358966l25.817838-25.817838 85.521588 66.480933-151.034352 150.388906-161.361488-5.163568A75.194453 75.194453 0 0 0 32.733582 728.063032l103.594075 69.708162-3.22723 12.908919a64.544595 64.544595 0 0 0 62.285535 80.358021 64.544595 64.544595 0 0 0 15.813425-1.936338l13.231642-3.227229 70.030886 104.239521a76.485345 76.485345 0 0 0 61.317365 32.272297h6.777183a75.839899 75.839899 0 0 0 68.41727-79.389852l-5.163567-162.975102 150.388906-150.388907 66.480933 85.521589-25.817838 25.817838a32.272298 32.272298 0 0 0 45.503939 45.826662l20.331548-20.331547 66.480933 85.521588-25.495115 25.495115a32.272298 32.272298 0 0 0 45.503939 45.826663l20.008825-20.008825 83.907973 108.112197a32.272298 32.272298 0 0 0 23.558777 12.586196h1.936338a33.885912 33.885912 0 0 0 22.913331-9.358966l91.330602-91.330602a32.272298 32.272298 0 0 0 8.390798-35.499527zM81.464751 120.37567l50.344784-50.344784L591.044329 249.787583l-150.388906 150.388906z m-10.649858 554.760794a11.618027 11.618027 0 0 1-4.518122-9.681689 11.295304 11.295304 0 0 1 11.940751-9.68169l102.303183 3.22723-6.45446 6.45446a32.272298 32.272298 0 0 0-8.390797 14.845257l-12.586196 50.99023z m134.898204 116.502994L226.367367 704.826978l53.894737-52.926568L804.364216 129.08919a139.093602 139.093602 0 0 1 96.816892-40.340372H904.085615a32.272298 32.272298 0 0 1 22.267885 9.036243 32.272298 32.272298 0 0 1 8.71352 23.558778 141.998109 141.998109 0 0 1-41.953986 101.012291l-130.702805 130.702805-205.897258 205.574535L371.592706 742.262843l-52.926568 53.894737-121.666562 30.335959z m161.361487 153.938859a10.649858 10.649858 0 0 1-9.681689 11.295304 9.358966 9.358966 0 0 1-9.036243-3.549953L290.911962 869.092972l50.667507-12.586196a36.790419 36.790419 0 0 0 15.16798-8.390797l6.131737-6.131737zM904.085615 942.028364l-280.768989-359.513394L774.996425 432.448787l179.756697 459.234793z"
                            fill="#6B400D" p-id="4613"></path>
                        <path
                            d="M893.113034 153.293413L871.813317 129.08919a32.272298 32.272298 0 0 0-45.503939 0 32.272298 32.272298 0 0 0 0 45.826663l22.590608 22.590608a32.272298 32.272298 0 1 0 45.826663-45.50394z"
                            fill="#FFC824" p-id="4614"></path>
                    </svg>
                    <div>
                        <div class="in-plan">进
                            <div class="out-plan">出</div>
                        </div>
                        <p class="name">CA2582</p>
                    </div>
                </div>
                <hr>
                <div class="bottom">
                    <span>Guangzhou Baiyun</span>
                </div>
            </div>
            <div class="line"></div>`
            let biaopai2 = new Label({
                position: leftPosition,
                dom: biaopai,
                name: '名称标牌'
            })
            biaopai2.addLabel()
            putData = {
                type: 'label',
                name: '标牌',
            }
            break;
        case '弹窗':
            const div = Object.assign(document.createElement('div'), {
                id: 'tag',
            });
            div.innerHTML =
                `<div class="pop-property-box">
                <div class="pop-property-header">
                    用户属性
                </div>
                <ul class="pop-property-list">
                    <li class="pop-property-item">
                        <span class="pop-property-name">用户名</span>
                        <span class="pop-property-value">john_doe</span>
                    </li>
                    <li class="pop-property-item">
                        <span class="pop-property-name">邮箱</span>
                        <span class="pop-property-value">john@example.com</span>
                    </li>
                    <li class="pop-property-item warning">
                        <span class="pop-property-name">账户状态</span>
                        <span class="pop-property-value">待验证</span>
                    </li>
                    <li class="pop-property-item">
                        <span class="pop-property-name">注册日期</span>
                        <span class="pop-property-value">2023-05-15</span>
                    </li>
                    <li class="pop-property-item success">
                        <span class="pop-property-name">会员等级</span>
                        <span class="pop-property-value">高级</span>
                    </li>
                </ul>
            </div>`
            let popweb = new Label({
                position: leftPosition,
                dom: div,
            })
            popweb.addLabel()
            putData = {
                type: 'label',
                name: '弹窗',
            }
            break;
        case '点光源':
            meteor3D.Light.addpointLight({
                position: leftPosition
            })
            break;
        case '聚光灯':
            meteor3D.Light.addSpotLight({
                position: leftPosition
            })
            break;
    }
    // putData.initPosition = leftPosition
    // putData.uuid = uuid
    // sceneData.value.scene.object.push(putData)
    // store.setObject(sceneData.value.scene)

    store.updateScene() //更新场景内图层版本号，告知图层面板更新

});


</script>

<style scoped>
.container {
    width: 180px;
    height: 100%;
    display: flex;
    border: 1px solid #ccc;

    /* backdrop-filter: blur(10px); */
    /* background-color: red; */


    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);


    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4);
    color: white;
}



.content {
    flex: 1;
    padding: 5px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.content::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.thumbnail {
    width: 100%;
    height: 60px;
    margin-bottom: 4px;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-sizing: border-box;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumbnail .text {
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景 */
    border-radius: 3px;
    font-size: 12px;
    pointer-events: none;
    /* 让文字不会阻止拖拽 */
}

.categories {
    width: 60px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 10px;
}

.category {
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    color: #ccc;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.category:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.category.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: bold;
}

.category.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: #00c2ff;
    border-radius: 0 2px 2px 0;
}
</style>